<template>
	<u-popup :show="show" bgColor="rgba(0,0,0,0)" @close="closeMore">
		<view class="popup_con">
			<view class="fixedTitle_oblation">
				<view class="left">
					<up-icon
						@click="
							return2 = false;
							return1 = true;
						"
						name="arrow-left"
						color="black"
						size="20"
					></up-icon>
				</view>
				<view class="middle">留言</view>
				<view class="right">
					<u-icon
						@click="
							return1 = false;
							return2 = true;
						"
						class="close"
						name="close"
						color="black"
						size="20"
					></u-icon>
				</view>
			</view>

			<view class="leaveMess_input">
				<view style="height: 540rpx; width: 100%">
					<up-textarea
						disableDefaultPadding
						:adjustPosition="false"
						placeholderClass="placeholderClass"
						v-model="message"
						placeholder="输入您的思念寄语"
						count
						height="470rpx"
						border="none"
						maxlength="200"
					></up-textarea>
				</view>

				<view class="leaveMess_usualMess">
					<view class="leaveMess_usualMess_title">
						<view class="display_flex ususalMess">
							常用语
							<image
								src="http://112.124.50.179:8888/imgs/home/leaveMess_expand.png"
								mode=""
							></image>
						</view>
						<view class="display_flex changeMess" @click="updateMess">
							<image
								src="http://112.124.50.179:8888/imgs/home/leaveMess_update.png"
								mode=""
								:class="updateAni && 'spin-element'"
							></image>
							换一批
						</view>
					</view>
					<view class="leaveMess_usualMess_content">
						<up-radio-group
							v-model="usualMess"
							placement="column"
							active-color="#524630"
							@change="changeUsualMess"
						>
							<up-radio
								:customStyle="{
									'font-weight': usualMess === index ? '600' : '400'
								}"
								labelSize="28rpx"
								labelColor="#524630"
								v-for="(item, index) in usualMess_list"
								:key="index"
								:label="item.mess"
								:name="index"
							></up-radio>
						</up-radio-group>
					</view>
				</view>
				<view class="leaveMess_input_footerBox">
					<view class="leaveMess_footerBox_contain"></view>
					<view class="leaveMess_footerBox_fixed" @click="showLeaveMess">
						<view class="leaveMess_footerBox_fixed_box">提交留言</view>
					</view>
				</view>
			</view>
		</view>
	</u-popup>

	<!-- 返回确认框 -->
	<myModel
		v-model:show="return1"
		title="返回"
		content="返回到留言列表页，当前输入的内容将不会被保存"
		@confirm="closeMore"
	></myModel>

	<!-- 退出确认框 -->
	<myModel
		v-model:show="return2"
		title="退出"
		content="关闭回到祠堂详情页面，当前输入的内容将不会被保存。"
		@confirm="closeMess"
	></myModel>
</template>

<script setup>
import { ref, watch } from 'vue';
import myModel from '/components/model/index.vue';
import { onReady, onPageScroll, onReachBottom } from '@dcloudio/uni-app';
import HomeApi from '@/API/home/index.js';
const homeApi = new HomeApi();
const emits = defineEmits(['closeMess', 'query']);

const show = ref(false);
let height = ref(500);
let message = ref('');
let usualMess = ref('');
let usualMess_list = [
	{
		mess: '祝福我们整个家族兴旺发达，家庭幸福美满'
	},
	{
		mess: '祝福我们整个家族兴旺发达，家庭幸福美满福美满福美满祝福我们整个家族兴旺发达，家庭幸福美满'
	}
];
const return1 = ref(false);
const return2 = ref(false);
const updateAni = ref(false);
watch(show, (n, o) => {
	if (show) {
		message.value = '';
		usualMess.value = '';
	}
});
const showLeaveMess = () => {
	homeApi
		.addMessageBoardApi({
			belongingTo: uni.getStorageSync('hallId') ? 2 : 3,
			correspondingId:
				uni.getStorageSync('hallId') || uni.getStorageSync('memorialServiceId'),
			message: message.value
		})
		.then((res) => {
			uni.showToast({
				icon: 'none',
				title: res.msg
			});
			show.value = false;
			emits('query');
		})
		.catch(() => {});
};
const closeMore = () => {
	return1.value = false;
	show.value = false;
};

const closeMess = () => {
	return2.value = false;
	show.value = false;
	emits('closeMess');
};

const changeUsualMess = (value) => {
	message.value = usualMess_list[value].mess;
	message.value = message.value.substring(0, 200);
};
/**
 * 换一批
 */
const updateMess = () => {
	updateAni.value = true;
	setTimeout(() => {
		updateAni.value = false;
	}, 1000);
};

defineExpose({
	show
});
</script>

<style lang="scss">
::v-deep.u-popup__content {
	padding: 0 !important;
}

.popup_con {
	background: url('http://112.124.50.179:8888/imgs/home/popbg.png') no-repeat;
	background-size: 100% 120%;
	background-position: top;
}

.fixedTitle_oblation {
	width: 100%;
	font-size: 32rpx;
	color: #156778;
	padding-top: 60rpx;
	height: 100rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;

	.left,
	.right {
		width: 100rpx;
		flex-shrink: 0;
	}

	.left {
		padding-left: 32rpx;
	}

	.right {
		display: flex;
		justify-content: flex-end;
		padding-right: 32rpx;
		box-sizing: border-box;
	}

	.middle {
		flex: 1;
		text-align: center;
	}
}

.close {
	width: 48rpx;
	height: 48rpx;
}

.leaveMess_input {
	padding: 0 32rpx;
	height: calc(500px + 112rpx);
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: center;

	::v-deep .placeholderClass {
		font-weight: 400 !important;
		font-size: 28rpx !important;
		color: #999999 !important;
		line-height: 33rpx !important;
	}

	::v-deep .u-textarea {
		background: #f1f6f3 !important;
		width: 100% !important;
		padding: 32rpx 40rpx !important;
		box-sizing: border-box !important;
	}

	::v-deep .u-textarea__field {
		color: #fff !important;
		font-size: 28rpx !important;
		text-align: justify !important;
	}

	::v-deep .u-textarea__count {
		background: none !important;
		font-weight: 400 !important;
		font-size: 28rpx !important;
		color: #999999 !important;
		line-height: 33rpx !important;
		margin-right: 25rpx;
		margin-bottom: 24rpx;
		padding: 0;
	}

	.leaveMess_usualMess {
		margin-top: 40rpx;
		width: 100%;

		.leaveMess_usualMess_title {
			display: flex;
			align-items: center;
			justify-content: space-between;
		}

		.ususalMess {
			font-weight: 400;
			font-size: 32rpx;
			color: #0e0e0e;
			line-height: 32rpx;

			image {
				width: 40rpx;
				height: 40rpx;
				margin-left: 4rpx;
			}
		}

		.changeMess {
			font-weight: 400;
			font-size: 24rpx;
			color: #4489fd;
			line-height: 24rpx;

			image {
				width: 26rpx;
				height: 26rpx;
				margin-right: 4rpx;
			}
		}

		.leaveMess_usualMess_content {
			width: 100%;
			height: 200rpx;
			margin-top: 28rpx;

			::v-deep .u-radio__icon-wrap--circle {
				flex-shrink: 0 !important;
			}
		}
	}

	.leaveMess_submitBtn {
		width: 400rpx;
		height: 88rpx;
		background: #f3e0bb;
		border-radius: 48rpx 48rpx 48rpx 48rpx;
		font-weight: 500;
		font-size: 32rpx;
		color: #524630;
		line-height: 88rpx;
		letter-spacing: 1px;
		text-align: center;
		margin-top: 82rpx;
	}

	.leaveMess_input_footerBox {
		width: 100%;

		.leaveMess_footerBox_contain {
			height: 128rpx;
		}

		.leaveMess_footerBox_fixed {
			position: fixed;
			padding: 20rpx 0;
			box-sizing: border-box;
			bottom: 0;
			left: 50%;
			transform: translateX(-50%);

			.leaveMess_footerBox_fixed_box {
				width: 400rpx;
				height: 88rpx;
				background: #f3e0bb;
				border-radius: 48rpx 48rpx 48rpx 48rpx;
				font-weight: 500;
				font-size: 32rpx;
				color: #524630;
				line-height: 88rpx;
				letter-spacing: 1px;
				text-align: center;
			}
		}
	}
}

@keyframes spin {
	from {
		transform: rotate(0deg);
	}

	to {
		transform: rotate(360deg);
	}
}

.spin-element {
	animation: spin 1s linear infinite;
	/* 其他样式，比如宽高、颜色等 */
}
</style>
